<button lv-button (click)="openDrawer()">编辑信息</button>
<ng-template #drawerContent>
  <lv-form [formGroup]="formGroup" #form>
    <lv-form-item>
      <lv-form-label lvRequired>Name</lv-form-label>
      <lv-form-control lvErrorType="multiple"
        [lvErrorTip]='{"required":"name cannot be empty","nameExist":"name already exists"}'>
        <input lv-input type="text" formControlName="name" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>Nickname</lv-form-label>
      <lv-form-control>
        <input lv-input type="text" formControlName="nickname" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label lvRequired>Gender</lv-form-label>
      <lv-form-control>
        <lv-form-control lvErrorTip="no Gender selected">
          <lv-select formControlName="gender" [lvOptions]='genderData' lvValueKey="label">
          </lv-select>
        </lv-form-control>
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label lvRequired>Age</lv-form-label>
      <lv-form-control lvErrorTip="age cannot be empty">
        <input lv-input type="text" formControlName="age" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label lvRequired>Password</lv-form-label>
      <lv-form-control lvErrorTip="password cannot be empty">
        <input lv-input type="password" formControlName="password" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>Contact</lv-form-label>
      <lv-form-control lvErrorTip="no contact selected">
        <lv-select formControlName="contact" [lvOptions]='contactData' lvValueKey="label"
          (ngModelChange)='onContactChange($event)'>
        </lv-select>
      </lv-form-control>
    </lv-form-item>
    <lv-form-item *ngIf='formGroup.contains("email")'>
      <lv-form-label [lvLabelTip]="labelTipTpl">
        Email
        <ng-template #labelTipTpl>
          <i lv-icon='icon-help' lv-tooltip='only support mailbox' style="margin-left: 4px;width: 14px;"></i>
        </ng-template>
      </lv-form-label>
      <lv-form-control lvErrorTip="email cannot be empty">
        <input lv-input formControlName="email" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item *ngIf='formGroup.contains("phone")'>
      <lv-form-label>Phone</lv-form-label>
      <lv-form-control lvErrorTip="phone cannot be empty">
        <input lv-input formControlName="phone" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>Website</lv-form-label>
      <lv-form-control>
        <input lv-input type="text" formControlName="website" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>Note</lv-form-label>
      <lv-form-control>
        <input lv-input type="text" formControlName="note" />
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>
        Description<i lv-icon='icon-help' lv-tooltip='only support mailbox'
          style="margin-left: 4px;width: 14px;"></i></lv-form-label>
      <lv-form-control>
        <textarea lv-input rows='10' formControlName="description"></textarea>
      </lv-form-control>
    </lv-form-item>
  </lv-form>
</ng-template>